<template>
  <div id="resetPassword">
    <div class="title">
      <h1>重置密码</h1>
    </div>
    <div class="form-wrap">
      <form
        action="#"
      >
        <div class="username">
          <div><label for="username"><span>账号:</span></label>
            <input
              type="text"
              placeholder="请输入邮箱号"
              id="username"
              name="username"
              v-validate ="'required|username'"
              v-model="user.username"
            ></div>
          <span
            class="error-info error-username"
            v-show="errors.has('username')"
          >
          {{ errors.first("username") }}
        </span>
        </div>
        <div class="check-code">
          <div>
            <label for="checkCode"><span>验证码:</span></label>
            <input
              type="text"
              placeholder="请输入验证码"
              id="checkCode"
              name="checkCode"
              v-validate ="{required : true , checkCode : getCheckCode}"
              v-model="checkCode"
              @input="checkCodeIsTrue"
            >
            <a class="get-check-code" @click="getCode">获取验证码</a>
          </div>
          <span
            class="error-info error-username"
            v-show="errors.has('checkCode')"
          >
          {{ errors.first("checkCode")}}
        </span>
        </div>
        <div class="password" :class="{hidden : isCheckFalse }">
          <div><label for="password"><span>密码:</span></label>
            <input
              type="password"
              placeholder="请输入密码"
              id="password"
              name="password"
              v-validate ="'required|password'"
              v-model="user.password"
            ></div>
          <span
            class="error-info error-username"
            v-show="errors.has('password')"
          >
        {{ errors.first("password") }}
      </span>
        </div>
        <div class="confirm-password" :class="{hidden : isCheckFalse }">
          <div>
            <label for="confirmPassword"><span>确认:</span></label>
            <input
              type="password"
              placeholder="请确认密码"
              id="confirmPassword"
              name="confirmPassword"
              v-validate ="{required : true ,confirmPassword: user.password}"
            >
          </div>
          <span
            class="error-info error-confirm-password"
            v-show="errors.has('confirmPassword')"
          >
        {{ errors.first("confirmPassword") }}
      </span>
        </div>
        <button type="button" @click="submit" :class="{hidden : isCheckFalse }">提交</button>
      </form>
    </div>
  </div>
</template>

<script>

  import { Validator } from 'vee-validate';
  // 修改默认
  const dictionary = {
    zh_CN: {
      messages: {
        required: () => '该值不能为空哦'
      }
    }
  };
  Validator.updateDictionary(dictionary);
  // username
  Validator.extend('username', {
    messages: {
      zh_CN:field => '邮箱号输入错误'
    },
    validate: value => {
      return /^((1\d{10})|((\w-*\.*)+@(\w-?)+(\.\w{2,})+))$/.test(value);
    }
  });
  // password
  Validator.extend('password', {
    messages: {
      zh_CN:field => '请输入8至11位的中、英文字符'
    },
    validate: value => {
      return /^.[0-9A-Za-z]{7,10}$/.test(value);
    }
  });
  // confirmPassword
  Validator.extend('confirmPassword', {
    messages: {
      zh_CN:field => '密码不一致'
    },
    validate: (value, args) => {
      return args == value;
    }
  });
  // check
  Validator.extend('checkCode', {
    messages: {
      zh_CN:field => '验证码输入错误'
    },
    validate: (value,args) => {
      return value == args;
    }
  });
  export default {
    name: 'resetPassword',
    data() {
      return {
          // 用户输入
          checkCode : "",
        user : {
            username : '',
            password : '',
        },
        // axios得到的, 这里必须有一个用户匹配不到的数据，不然在没得到的时候把验证码删除了  就会展开下面的类容
        getCheckCode : "1948389397",
        isCheckFalse : true
      }
    },
    methods : {
      // 表单提交的时候验证
      submit : function () {
        let that = this;
        this.$validator.validateAll("username").then((result)=>{
          // 这里默认成功  成功之后跳到Login  that.$emit('switch')
          if(!result){
            that.$emit('switch','login')
          }
        })
      },
      getCode : function (){
        let that = this;
        this.$validator.validateAll({
          username : that.user.username
        }).then((result)=>{
          // 这里默认成功  成功之后跳到Login  that.$emit('switch')
         if (result) {
           that.getCheckCode = 'nzq';
         }
        })
      },
      checkCodeIsTrue : function () {
        if (this.checkCode===this.getCheckCode) {
          this.isCheckFalse = false
        }else {
          this.isCheckFalse = true
        }
      },
    },
    mounted() {
    }
  }
</script>

<style scoped>
  #resetPassword {
    width: 400px;
    padding:10px 30px 30px 30px;
    margin: 60px auto;
    border: 1px solid #d3d4d5;
    background-color: white;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
  }
  #resetPassword .title,h1{
    font: 30px/90px "Microsoft YaHei",sans-serif;
    font-weight: 500;
    text-align: center;
  }
  .form-wrap {
    width: 100%;
  }
  #resetPassword .check-code input{
    margin-left: 40px;
  }
#resetPassword .form-wrap form>div{
  margin: 30px 0;
}

  .hidden {
    display: none;
  }
  form button {
    height: 40px;
    font-size: 17px;
  }
</style>
